<template>
  <footer>
    <div class="footer">
      <div class="footer-container">
          <Row>
            <i-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :lg="{ span: 6 }">
                <div class="footer-col">
                  <ul>
                <li><b>QQ群</b></li>
                <li><img src="../assets/QQgroup.png" alt="QQ群"></li>
              </ul>
            </div>
            </i-col>
            <i-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :lg="{ span: 6 }">
            <div class="footer-col">
              <ul class="t">
                <li><b>HappyTeam</b></li>
                <li><a href="">关于我们</a></li>
                <li><a href="">开发者指南</a></li>
                <li><a href="">使用指南</a></li>
                <li><a href="">我们的合作商</a></li>
              </ul>
            </div>
            </i-col>
            <i-col :xs="{ span: 24}" :sm="{ span: 12 }" :md="{ span: 6 }" :lg="{ span: 6 }">
                <div class="footer-col">
              <ul>
                <li class="t"><b>服务条款</b></a></li>
                <li><a rel="nofollow" href="">条款1</a></li>
                <li><a rel="nofollow" href="">条款2</a></li>
                <li><a rel="nofollow" href="">条款3</a></li>
              </ul>
            </div>
            </i-col>
            <i-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :lg="{ span: 6 }">
                  <div class="footer-col">
                      <ul>
                      <li class="t"><b>联系我们</b></a></li>
                      <li><a rel="nofollow" >QQ：16703167</a></li>
                      <li><a rel="nofollow" href="https://github.com/charlesgao/happyteam">GitHub</a></li>
                      <li><a rel="nofollow" href="http://git.oschina.net/charlesgao/happyteam">码云</a></li>
                      <li><a rel="nofollow" href="">Charles Gao, Chris Li, Eric Dou, Rocky Gao, Sunny Wang </a></li>

                    </ul>
                
              </div>
            </i-col>
          </Row>
          <!-- /. RIGHT PART -->

        </div>

      </div>

      <div class="footer-container legal">
        <!-- COPYRIGHT -->
        <div class="copy">
          Copyright HAPPY TEAM @2017
        </div>
      </div>

    </div>
  </footer>
</template>

<script>
  export default {
    name: 'footer-bar',
    data: function () {
      return {}
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .footer {
    background: #0288d1 none repeat scroll 0 0;
    clear: both;
    color: #fff;
    font-size: 14px;
    min-height: 200px;
    padding: 40px 40px 40px 40px;
  }

  .footer-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
  }

  .footer-container ul {
    list-style: outside none none;
    padding-top: 20px;
  }

  .footer .footer-container li{
    padding-bottom: 8px;
  }

  .footer .footer-col ul li a{
    color: #fff;
    font-size: 13px;
    text-decoration: none;
  }

  .footer .footer-col ul li b {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bolder;
    margin-top: 20px;
  }


  .footer .legal{
    margin-top: 200px;
  }

  .footer .copy {
    border-top: 1px solid #fff;
    color: #fff;
    font-size: 12px;
    margin: 20px 0;
    padding-top: 20px;
    text-align: center;
    text-transform: uppercase;
  }

</style>
